<template>
  <div class="chart-container">
    <Line :data="chartData" :options="chartOptions" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Line } from 'vue-chartjs'
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js'

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler)

const props = defineProps<{
  data: { label: string; value: number }[]
  title?: string
  color?: string
}>()

const chartData = computed(() => ({
  labels: props.data.map(d => d.label),
  datasets: [{
    label: props.title || '趋势',
    data: props.data.map(d => d.value),
    borderColor: props.color || '#00f3ff',
    backgroundColor: `${props.color || '#00f3ff'}40`,
    borderWidth: 2,
    fill: true,
    tension: 0.4,
    pointRadius: 4,
    pointHoverRadius: 6,
    pointBackgroundColor: props.color || '#00f3ff',
    pointBorderColor: '#0a0e27',
    pointBorderWidth: 2
  }]
}))

const chartOptions = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      backgroundColor: 'rgba(26, 31, 58, 0.95)',
      titleColor: '#00f3ff',
      bodyColor: '#ffffff',
      borderColor: '#00f3ff',
      borderWidth: 1
    }
  },
  scales: {
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(255, 255, 255, 0.1)'
      },
      ticks: {
        color: '#8892b0'
      }
    },
    x: {
      grid: {
        display: false
      },
      ticks: {
        color: '#8892b0'
      }
    }
  }
}))
</script>

<style lang="scss" scoped>
.chart-container {
  height: 300px;
  position: relative;
}
</style>
